/**
 * Created by apple on 2017/12/14.
 */
import React from 'react';
import {View, StyleSheet, Text, Platform, BackHandler} from 'react-native';
import {WhiteSpace, WingBlank, Button, Flex, ActivityIndicator, Toast} from 'antd-mobile';

export default class ActivityIndicatorExample extends React.Component<any, any> {
  closeTimer: any;

  constructor(props) {
    super(props);
    this.state = {
      animating: false,
    };
    this.loadingToast = this.loadingToast.bind(this);
  }

  backHandle() {
    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
      //最近2秒内按过back键，可以退出应用。
      BackHandler.exitApp();
      return false;
    }
    this.lastBackPressed = Date.now();
    Toast.info('再点一次退出应用');
    return true;
  }

  componentDidMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener("back", this.backHandle);
    }
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('back', this.backHandle)
  }

  loadingToast() {
    this.setState({animating: !this.state.animating});
    this.closeTimer = setTimeout(() => {
      this.setState({animating: !this.state.animating});
    }, 2000);
  }

  render() {
    return (
      <View style={[styles.demo]}>
        <WingBlank>
          <Flex>
            <Flex.Item>
              <Text>Icon without text</Text>
            </Flex.Item>
            <Flex.Item>
              <ActivityIndicator />
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WhiteSpace size="xl" style={{backgroundColor: '#fff'}}/>
        <WingBlank>
          <Flex>
            <Flex.Item>
              <Text>Icon with text</Text>
            </Flex.Item>
            <Flex.Item>
              <ActivityIndicator text="Loading..."/>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WhiteSpace size="xl" style={{backgroundColor: '#fff'}}/>
        <WingBlank>
          <Flex>
            <Flex.Item>
              <Text>Dark Background</Text>
            </Flex.Item>
            <Flex.Item>
              <View style={[styles.darkBg]}>
                <ActivityIndicator color="#fff"/>
              </View>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WhiteSpace size="xl" style={{backgroundColor: '#fff'}}/>
        <WingBlank>
          <Flex>
            <Flex.Item>
              <Text>Large Size</Text>
            </Flex.Item>
            <Flex.Item>
              <ActivityIndicator size="large"/>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WhiteSpace size="xl" style={{backgroundColor: '#fff'}}/>
        <WingBlank>
          <Button onClick={this.loadingToast}>Click to show Toast</Button>
        </WingBlank>
        <ActivityIndicator
          animating={this.state.animating}
          toast
          size="large"
          text="Loading..."
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  demo: {
    marginTop: 20,
  },
  darkBg: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 89,
    height: 89,
    backgroundColor: '#2B2F42',
  },
  gray: {
    backgroundColor: '#CCC',
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 8,
  },
});